<template>
  <el-container class="layout-container">
    <el-container :class="[!isCollapse ?'openside':'hideside',isMobile ? 'mobile': '']">
      <div class="shadowBg" @click="totalCollapse"></div>
      <el-aside class="layout-aside" :style="{background: userStore.backgroundColor}">
        <div class="title">
          <img alt class="logoimg" :src="$GLOBAL_CONFIG.appLogo">
          <div v-if="isMobile || !isCollapse" class="tit-text" :style="{color:userStore.baseColor}">{{ $GLOBAL_CONFIG.appName }}</div>
        </div>
        <Aside class="aside" />
      </el-aside>
      <el-container>
        <el-header class="layout-header">
          <el-row class="layout-header-row">
            <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1">
              <div class="menu-total" @click="totalCollapse">
                  <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
                  <div v-else class="gvaIcon gvaIcon-arrow-double-left" />
                </div>
            </el-col>
            <el-col :xs="8" :sm="11" :md="11" :lg="11" :xl="11">
              <el-breadcrumb class="breadcrumb">
                <el-breadcrumb-item
                  v-for="item in matched.slice(1, matched.length)"
                  :key="item.path"
                >{{ item.meta.title }}</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :xs="14" :sm="12" :md="12" :lg="12" :xl="12" class="header-user-info">
              <div style="display: flex;align-items: center;">
                <HeaderTool />
                <el-dropdown>
                  <div style="cursor: pointer;display: flex;align-items: center;">
                    <Avatar :pic-src="IMAGE_BASE_URL + getHeaderImage(userStore.userInfo.header_img)" style="margin-right: 6px;"></Avatar>
                    <span style="margin-left: 5px">{{ userStore.userInfo.nick_name }}</span>
                    <el-icon>
                      <arrow-down />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <span style="font-weight: 600;">
                          当前角色：
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item icon="avatar">个人信息</el-dropdown-item>
                      <el-dropdown-item icon="reading-lamp" @click="loginPresent.toLogout">登 出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
          <HistoryComponent />
        </el-header>
        <el-main class="layout-main">
          <router-view 
            v-if="reloadFlag"
            v-slot="{ Component }"
            element-loading-text="正在加载中"
            v-loading="loadingFlag">
            <div> 
            <!-- keepalive 与router-view使用时， 注意使用div 包裹， 不然会出现空白 -->
              <transition mode="out-in" name="el-fade-in-linear">
                <keep-alive :include="routerStore.keepAliveRoutes">
                  <component :is="Component"/>
                </keep-alive>
              </transition>
            </div>
          </router-view>  
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Hall',
}
</script>

<script setup>
import Aside from '@/views/hall/aside/index.vue'
import HeaderTool from '@/views/hall/headerTool/index.vue'
import Avatar from '@/components/avatar/index.vue'
import HistoryComponent from '@/views/hall/aside/historyComponent/history.vue'
import { computed, ref, onMounted, nextTick } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useHallRouterStore } from '@/store/modules/hallRouter'
import { useRouter, useRoute } from 'vue-router'
import { emitter } from '@/utils/bus.js'
import  LoginPresenter  from '@/views/login/loginPresenter'
import {IMAGE_BASE_URL} from "@/common/const";

const loginPresent = new LoginPresenter()

const router = useRouter()
const route = useRoute()

const userStore = useUserStore()
const routerStore = useHallRouterStore()
//是否展开侧边栏 (大小侧边栏切换)
const isCollapse = ref(false)
//mobile 隐藏侧边栏
const isMobile = ref(false)
const loadingFlag = ref(false)

const updatePageUIForSize = () => {
  const screenWidth = document.body.clientWidth
  if (screenWidth < 1000) {
    isCollapse.value = true
    isMobile.value = true
  } else {
    isCollapse.value = false
    isMobile.value = false
  }
}
updatePageUIForSize()

const totalCollapse = () => {
  isCollapse.value = !isCollapse.value
  emitter.emit('collapse', isCollapse.value)
}

const matched = computed(() => route.meta.matched)

onMounted(() => {
  emitter.emit('collapse', isCollapse.value)
  emitter.emit('mobile', isMobile.value)
  emitter.on('totalCollapse', () => {
    totalCollapse()
  })
  emitter.on('reload', reload)
  emitter.on('showLoading', () => {
    loadingFlag.value = true
  })
  emitter.on('closeLoading', () => {
    loadingFlag.value = false
  })
  window.onresize = () => {
    return (() => {
      updatePageUIForSize()
      emitter.emit('collapse', isCollapse.value)
      emitter.emit('mobile', isMobile.value)
    })()
  }
})

const reloadFlag = ref(true)
let reloadTimer = null
const reload = async() => {
  if (reloadTimer) {
    window.clearTimeout(reloadTimer)
  }
  reloadTimer = window.setTimeout(async() => {
    if (route.meta.keepAlive) {
      reloadFlag.value = false
      await nextTick()
      reloadFlag.value = true
    } else {
      const title = route.meta.title
      router.push({ name: 'Reload', params: { text:'dd' }, query:{b:'se'}})
    }
  }, 400)
}

const toPerson = () => {
  router.push({ name: 'person' })
}

const getHeaderImage = (pictures) => {
  if (pictures) {
    let images = JSON.parse(pictures)
    if (images.length > 0) {
      return images[0].url
    }
  }
  return ""
}


</script>

<style lang="scss" scoped>
</style>

<style lang="scss">
@import '@/assets/css/views_hall_main_layout.scss';
</style>